<template>
    <div>
        <a class="collaspe-icon" @click="toggleCollaspe">{{ collaspe ? '收起' : '展开' }}流程历史</a>
        <div v-show="collaspe">
            <div class="flow-text">
                <span>{{ detail.versionName }} </span>
            </div>
            <a-table rowKey="taskId" size="small" :columns="tableColumns" :data-source="list" :pagination="false">
                <template #result="{ record }">
                    {{ record.variables.result }}
                </template>
                <template #taskDesc="{ record }">
                    <div style="white-space: pre-wrap" v-html="record.taskDesc" />
                </template>
                <template #action="{ record }">
                    <a v-if="checkIsShow(record)" @click="showDetail(record)">详情</a>
                </template>
            </a-table>
        </div>
        <history-detail-modal ref="detailModalRef" />
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue';
import HistoryDetailModal from './historyDetailModal.vue';
import { defineComponent, ref, unref, reactive, toRefs, computed, watch } from 'vue';
export default defineComponent({
    name: 'HistoryRecord',
    components: {
        HistoryDetailModal
    },
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const state = reactive<any>({
            list: [],
            collaspe: false
        });
        const detailModalRef = ref();
        // 表格表头栏
        const tableColumns = [
            {
                title: '节点开始时间',
                dataIndex: 'createTime',
                align: 'center',
                width: 150
            },
            {
                title: '操作人',
                dataIndex: 'assigneeName',
                align: 'center',
                width: 100
            },
            {
                title: '操作步骤',
                dataIndex: 'taskName',
                align: 'center',
                width: 100
            },
            {
                title: '操作结果',
                dataIndex: 'result',
                slots: { customRender: 'result' },
                align: 'center',
                width: 100
            },
            {
                title: '流程意见',
                dataIndex: 'taskDesc',
                slots: { customRender: 'taskDesc' }
            },
            {
                title: '节点完成时间',
                dataIndex: 'endTime',
                width: 150,
                align: 'center'
            }
        ];
        const isAutoTest = computed(() => {
            return props.detail.pmpTestInformationDTO;
        });
        const getList = async (instanceId) => {
            const query = {
                instanceId,
                type: 'tmp'
            };
            const { success, moule } = await api.historyModel.historyOperationByInstanceId(query);
            if (success) {
                state.list = [...moule];
            }
        };
        // 获取历史记录详情
        const getDetailData = async (taskId: number, taskName: string) => {
            const query = {
                taskId
            };
            const { success, moule, errorMsg } = await api.historyModel.findByTaskId(query);
            if (success) {
                let detailData = moule.variables[taskId] || moule.variables.param;
                if (detailData) {
                    detailData = JSON.parse(detailData);
                    detailData.taskName = taskName;
                    detailData.formKey = moule.formKey;
                    if (moule.formKey === 'requireDev' || moule.formKey === 'outSide') {
                        detailData.files = unref(isAutoTest) ? [...detailData.pmpTestInformationDTO.files] : detailData.files;
                    }
                    unref(detailModalRef).open(detailData);
                } else {
                    message.warning('暂无详情');
                }
            } else {
                message.error(errorMsg);
            }
        };
        const showDetail = ({ taskId, taskName }) => {
            getDetailData(taskId, taskName);
        };
        const checkIsShow = ({ taskId, formKey }) => {
            const hideArr: string[] = ['requireTest'];
            if (isAutoTest.value) {
                return taskId !== '-1' && !hideArr.includes(formKey);
            }
            return taskId !== '-1';
        };
        const toggleCollaspe = () => {
            state.collaspe = !state.collaspe;
        };
        watch(
            () => props.detail,
            (n) => {
                if (n && n.pmpTestInformationDTO) {
                    if (n.pmpTestInformationDTO.testId) {
                        getList(n.pmpTestInformationDTO.testId);
                    }
                }
            },
            { immediate: true, deep: true }
        );
        return {
            ...toRefs(state),
            detailModalRef,
            tableColumns,
            showDetail,
            checkIsShow,
            toggleCollaspe
        };
    }
});
</script>
<style lang="less" scoped>
.flow-text {
    margin-bottom: 8px;
    a {
        font-size: 14px;
        margin-left: 8px;
    }
}
.collaspe-icon {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
}
</style>